<template>
  <div class="channel-edit">
    <!-- TODO: 我的频道 -->
    <van-cell title="我的频道" :border="false">
      <van-button @click="isEdit = !isEdit" size="mini" round type="danger" plain>
        {{ isEdit ? '完成' : '编辑' }}
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(channel, index) in channels"
        :key="channel.id"
        @click="onMyChannelClick(channel, index)"
      >
        <!-- icon="close"
        :text="channel.name" -->
        <!-- slot='text' 自定义文字 -->
        <span class="text" :class="{ active: active == index }" slot="text">{{
          channel.name
        }}</span>
        <!-- slot='icon' 自定义图标 -->
        <van-icon v-if="isEdit && index !== 0" slot="icon" name="close"></van-icon>
      </van-grid-item>
    </van-grid>
    <!-- TODO: 频道推荐 -->
    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item
        class="channel-item"
        icon="plus"
        v-for="channel in recommendChannles"
        :key="channel.id"
        :text="channel.name"
        @click="onAddChannel(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel.js'
import _ from 'lodash'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    channels: {
      type: Array,
      required: true,
    },
    active: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      allChannels: [],
      isEdit: false,
    }
  },
  // allChannels 全部数据 1 2 3 4 5 6
  // channels 我的数据 1 2 3 4

  // => 推荐 :  5 6
  // allChannels - channels
  computed: {
    ...mapState(['user']),
    recommendChannles() {
      // 格式 : _.differenceWith(1 2 3 4 5 6, 1 2, _.isEqual)
      // 参数1 : 要检查的数组
      // 参数2 : 排除的值
      // 参数3 : _.isEqual
      return _.differenceWith(this.allChannels, this.channels, _.isEqual)
    },

    // recommendChannles() {
    //   return this.allChannels.filter(channelItem => {
    //     // 1 2 3 4 5 6
    //     // return true/要 false/不要
    //     let flag = this.channels.some(item => channelItem.id == item.id) //  1 2 3

    //     return !flag
    //   })
    // },
  },
  watch: {},
  created() {
    this.loadAllChannels()
  },
  mounted() {},
  methods: {
    // 获取全部频道
    async loadAllChannels() {
      let res = await getAllChannels()
      console.log('全部频道', res.data)
      this.allChannels = res.data.data.channels
    },
    // 添加频道
    async onAddChannel(channel) {
      this.channels.push(channel)

      // 持久化
      // 登录
      if (this.user.token) {
        try {
          await addUserChannel({
            id: channel.id,
            seq: this.channels.length,
          })
        } catch (error) {
          this.$toast.fail('添加频道失败')
        }
      }
      // 未登录
      else {
        setItem('TOUTIAO_CHANNELS', this.channels)
      }

      // 未登录
    },
    // 点击我的频道项 删除
    async onMyChannelClick(channel, index) {
      // 区分是否在编辑状态
      // 非编辑状态 => 切换频道
      //  编辑状态 => 删除频道
      if (this.isEdit) {
        if (index === 0) {
          this.$toast.fail('推荐频道不能删')
          return
        }

        // =>
        //   html(2)    开发者咨询(2)
        if (index <= this.active) {
          //                               2-1 = 1
          this.$emit('update-active', this.active - 1, true)
        }

        // 删除
        //    10          1          = 9
        //     9          1            8
        this.channels.splice(index, 1)
        // ---------------------------------------

        //登录
        if (this.user.token) {
          try {
            await deleteUserChannel(channel.id)
          } catch (error) {
            this.$toast.fail('删除频道失败')
          }
        }
        // 未登录
        else {
          setItem('TOUTIAO_CHANNELS', this.channels)
        }
      } else {
        //                          当前索引 是否显示pop弹出层
        this.$emit('update-active', index, false)
      }
    },
  },
}
</script>

<style scoped lang="less">
.channel-edit {
  .channel-item {
    height: 86px;
    width: 162.5px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__text {
        color: #222;
        font-size: 28px;
      }
    }
  }
}

/deep/ .recommend-grid {
  .van-grid-item__content {
    flex-direction: row;
    color: #222;
    .van-icon {
      font-size: 24px;
    }

    .van-grid-item__text {
      font-size: 28px;
      margin-top: 0;
    }
  }
}

// /deep/ .van-icon-close {
//   position: absolute;
//   right: -10px;
//   top: -10px;
//   font-size: 36px;
//   color: #f00;
// }

/deep/ .van-icon-close {
  position: absolute;
  right: -82px;
  top: -30px;
  font-size: 36px;
  color: red;
}

/deep/ .van-grid-item__content {
  background-color: #f5f5f6;
  .van-grid-item__text,
  .text {
    color: #222;
    font-size: 28px;
    white-space: nowrap;
  }

  .active {
    color: red;
  }
}

.van-grid-item__icon-wrapper {
  position: unset;
}
</style>
